/**
 * Created by user on 2018/7/4.
 */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import ReplaySwiper from './swiper'
import LoadingMedia from './loadingMedia'
import LoadError from './loadError'
import MiddleBtn from './middleBtn'
import ToQaBtn from './toQaBtn'
import ReplayFooter from './replayFooter'
import ReplayVideo from './replayVideo'
import ReplayDm from './replayDm'
import ReplayOutDmSwitch from './OutDmSwitch'

import ReplayPlayer from '@utils/ReplayPlayer'
import PlayController from '@utils/PlayController'
import { originData, Type, ReplayVideoPlayer } from '@utils/Global'
import { ReplayAction } from '@act'

const { changeSwiperIndex, toggleShowType } = ReplayAction

class ReplayLiveScreen extends Component {
  componentDidMount() {
    const data = originData['replay']
    PlayController.setInit(data.info.start_time, data.live, data, (obj) => {
      if (obj.type === Type.COMMON_TYPE.COMMON_LIVE_SLIDE) {
        this.handleGoToMsg(obj.task)
        obj.callback()
      } else if (obj.type === Type.COMMON_TYPE.COMMON_START_VIDEO) {
        this.handleStartVideoMsg(obj.task, obj.callback)
      }
    })
  }
  componentWillUnmount() {

  }

  handleGoToMsg(task) {
    // console.log('handleGoToMsg', task)
    const { dispatch } = this.props
    const index = parseInt(task.data.index)
    dispatch(changeSwiperIndex(index))
  }
  handleStartVideoMsg(task, callback) {
    // console.log('handleStartVideoMsg', task)
    ReplayPlayer.pause()
    PlayController.stop()
    const { dispatch } = this.props
    dispatch(toggleShowType('videoMask', true))
    ReplayVideoPlayer.play(task.data.url, 0, () => {

    }, () => {
      dispatch(toggleShowType('videoMask', false))
      callback && callback()
      ReplayPlayer.start()
      PlayController.start()
    })
    // this.$invoke('../liveVideoMask', 'playVideo', task.data.url, 0, callback)

  }
  render() {
    const { showDm } = this.props
    return (
      <div className="replay_live_screen">
        <div className={`replay_live_screen_left ${showDm ? 'showDm' : ''}`}>
          <ToQaBtn/>
          <ReplaySwiper />
          <LoadingMedia />
          <LoadError />
          <MiddleBtn />
          <ReplayFooter />
          <ReplayVideo />
          <ReplayOutDmSwitch/>
        </div>
        <ReplayDm />
      </div>
    )
  }
}

const mapState = (state) => {
  return {
    showFooter: state.ReplayState.showType.footer,
    showToQa: state.ReplayState.showType.toQaBtn,
    showDm: state.ReplayState.showType.dm
  }
}

export default connect(mapState)(ReplayLiveScreen)
